<template>
  <div class="banner">
    <el-carousel :interval="3000" height="470px">
      <el-carousel-item v-for="(item, index) in bannerList" :key="index" class="carousel-item">
        <img :src="item.imgUrl" :alt="item.title">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 模拟轮播图数据
const bannerList = ref([
  { 
    title: '轮播图1', 
    imgUrl: 'https://img10.360buyimg.com/pop/s1180x940_jfs/t1/147403/25/36080/78033/6431f696Fa20bf92a/c8cad66b35cc4b74.jpg.webp',
    link: '#'
  },
  { 
    title: '轮播图2', 
    imgUrl: 'https://img13.360buyimg.com/pop/s1180x940_jfs/t1/232441/32/3472/134739/64320281Facf5c44a/f26037bc8f3d54de.jpg.webp',
    link: '#'
  },
  { 
    title: '轮播图3', 
    imgUrl: 'https://img11.360buyimg.com/pop/s1180x940_jfs/t1/152603/12/35876/91575/6431af74F468a97e9/28e4a612bc5a5d00.jpg.webp',
    link: '#'
  }
])
</script>

<style lang="scss" scoped>
.banner {
  .carousel-item {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style> 